<template>
        <header class="by-header" >
            <div class="by-header-top">
                <router-link to="/searchShop" class="by-search">
                    <van-icon name="search" size="0.3rem" color="#BBBBBB"/>
                    <span>请输入你想要的商品</span>
                </router-link>
                <div class="by-header-msg">
                    <router-link to="/msg" class="toMsg">
                        <van-icon name="chat-o" size="0.3rem"/>
                    </router-link>
                    <span>消息</span>
                </div>
            </div>
            <nav class="by-header-bottom" >
                <div class="by-header-bottom-left" v-show="!isshow" >
                    <van-tabs @click='onClick(num)' v-model="num" color="#fff"  title-active-color="yellow" title-inactive-color="#fff" line-height="2px" background="#794DFA"  swipe-threshold="4" :border="false">
                        <!-- <van-tab to="remen" title="热门" v-show="isS"></van-tab> -->
                        <van-tab   v-for="item  in nav_list"  :title="item.name" :key="item.catagoryId " :to="{path:`/home/${item.catagoryId}`}">
                        </van-tab>
                    </van-tabs>
                </div>
                
                <!-- <li class="by-header-bottom-more" @click="DropdownMenu" >∨</li> -->
                <van-button class="by-header-bottom-more" type="primary" :text="show?'∧':'∨'" @click="show = !show" :lock-scroll="false" />
                <van-overlay :show="show" @click="show = false">
                    <div class="wrapper" >
                        <div class="block" > 
                            
                            <span v-for="(item , index) in nav_list"  :key="item.catagoryId"  :class="bordershow[index]?'active':'noactive'" @click="checkClolor(index,item.catagoryId )">
                                <router-link :to="{path:`/home/${item.catagoryId}` }" class="spanColor">{{item.name}}</router-link>
                            </span>
                        </div>
                    </div>
                </van-overlay>
            </nav>
        </header>
</template>
<script>
import { Icon } from 'vant';
export default {
    props:['nav_list','isS'],
    created() {
        this.bordershow = this.nav_list.map(item=>false)
        // this.num = this.$route.params.id?this.$route.params.id:''
        // console.log(this.num,666)
    },
    

    methods: {
        onClick(index){
            this.bordershow = this.nav_list.map(item=>false)
            this.bordershow[index] = true
            // console.log(this.$route.params.id)
        },
        DropdownMenu(){
            console.log(1)
        },
        onConfirm() {
        this.$refs.item.toggle();
        },
        checkClolor(index,id){
            this.bordershow = this.nav_list.map(item=>false)
            this.bordershow[index] = true
            this.num = index
        }
    },
     data() {
        return {
            show: false,
            isshow:false,
            bordershow:[],
            num:0,
            // num:99999999,
        }
    },
   
    
}
</script>
<style lang="stylus" scoped>
      .by-header
            width 100%
            height 1.84rem
            background-color #794DFA
            .by-header-top
                width 100%
                height 0.96rem
                padding 0.2rem 0.2rem 0.12rem
                box-sizing border-box
                display flex
                color #fff
                font-size 0.14rem
                z-index 999999999
                position relative
                background-color #794DFA
                .by-search
                    flex 8.5
                    height 0.64rem
                    display block
                    background-color rgb(244,244,244)
                    border-radius 0.3rem
                    display flex
                    align-items center
                    color #dddddd
                    .van-icon
                        margin 0 0.2rem 
                    span 
                        font-size 0.28rem
                .by-header-msg
                    display flex
                    flex 1.5
                    flex-direction column
                    justify-content flex-start
                    align-items center
                    height 0.80rem
                    .toMsg
                        color #ffffff
                    span 
                        font-size 0.24rem
            .by-header-bottom
                width 100%
                height 0.88rem
                display flex
                align-items center
                font-size 0.28rem
                .by-header-bottom-left
                    flex 8
                    overflow auto
                    position relative
                    z-index 9999999
                .by-header-bottom-more
                    flex 1
                    text-align center
                    color #fff
                .wrapper 
                    display flex
                    align-items center
                    justify-content center
                    height: 100%
                .van-button--primary
                    background-color #794dfa
                    border none
                    position relative
                    z-index 999999
                .block 
                    width 100%
                    height 6rem
                    background-color #fff
                    position absolute
                    top 1.84rem
                    // top 0
                    left 0
                    padding 0.2rem 0
                    span 
                        display block
                        float left
                        width 20%
                        height 0.6rem
                        border 1px solid #999999
                        text-align center
                        font-size .28rem !important
                        line-height 0.6rem
                        margin-left 0.3rem 
                        margin-bottom 0.2rem
                    span.noactive
                        border 1px solid #999999
                    span.active
                        border 1px solid #7f4395
                    .spanColor
                        color black
    
</style>

<style lang="css">
.van-icon-chat-o::before{
    top : 10 !important;
}
</style>